<!DOCTYPE html> 
<html>
<head>
	<meta charset="utf-8">
	<title>PhoneGap</title>
	<link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b1.min.css" />
	
	<script type="text/javascript" charset="utf-8" src="jquery-1.6.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0b1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery.tmpl.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.js"></script>
	
 	<script id="movieTemplate" type="text/x-jquery-tmpl">
		<li>
			<h3>${MovieName}</h3>
			<p>${ShortDesc}</p>
		</li>
    </script>
	<script type="text/javascript">
		// As this template will be used repetitively we will precompile it to a named template
		$('#movieTemplate').template('movieTemplate');
		$(document).ready(function() {
			//document.addEventListener("deviceready", onDeviceReady, false);
			onDeviceReady();
		});
		
		// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
		//
		function onDeviceReady() {
			$("#comingsoon").hide();
			
			$('#home').live('pagebeforeshow',function(event, ui){
   				$.mobile.pageLoading();
   				$("#nowshowing").html("");
   				getNowShowingData();
		  	});
			
			/*
			$("#nowshowingButton").click(function() {
				alert("nowshowingButton");
				$("#nowshowing").show();
				$("#comingsoon").hide();
			});
			
			$("#comingsoonButton").click(function() {
				alert("comingsoonButton");
				$("#nowshowing").hide();
				$("#comingsoon").show();
			});*/
		}
		
		function getNowShowingData() {
			$.ajax({
	            type: "GET",
	            url: "http://tonnguyen.com/services/nowshowing.php?lang=1",
	            dataType: "jsonp",
	            jsonp: 'jsonp_callback',
	            success: function(data) {
	                $.tmpl('movieTemplate', data.MovieInfo.movie).appendTo('#nowshowing');
	                $('#nowshowing').listview('refresh');
	            }
			});
		}
	</script>
</head>
<body>
	<div data-role="page" id="home">
		<div data-role="header" data-position="inline">
			<h1>Page Title</h1>
			<a href="#refresh" data-icon="refresh" class="ui-btn-right">Refresh</a>
			<div data-role="navbar">
				<ul>
					<li><a id="nowshowingButton" class="ui-btn-active">One</a></li>
					<li><a id="comingsoonButton">Two</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /header -->
		<div data-role="content">
			<ul data-role="listview" id="nowshowing">
			</ul>
			<div id="comingsoon">
				<div data-role="collapsible" data-collapsed="true">
					<h3>I'm a header3</h3>
					<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
				</div>
				<div data-role="collapsible" data-collapsed="true">
					<h3>I'm a header4</h3>
					<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
				</div>
			</div>
		</div><!-- /content -->
	</div><!-- /page -->
</body>
</html>